<table class="pure-table pure-table-striped" width="100%">
    <% for (var i=0; i < tickets.length; i+=1) { %>
        <% var ticket = tickets[i] %>
        <% var sep = ticket.parent_key ? " / " : "" %>
        <tr>
            <td align="center">
                <a href="/entries/new?ticket_num=<%= ticket.key %>&parent_ticket=<%= ticket.parent_key %>&subject=<%= encodeURIComponent(ticket.summary) %>&category=Ticket"><i class="fa fa-arrow-down"></i></a>
            </td>
            <td>
                <% if (ticket.is_flagged) { %>
                <i class="fa fa-flag"></i>
                <% }%>
                <a href="http://<%= ticket.jira_host %>/browse/<%= ticket.parent_key %>"><%= ticket.parent_key %></a><%= sep %><a href="<%= ticket.link %>"><%= ticket.key %> - <%= ticket.summary %></a>
                &nbsp;
                (<font color="<%= ticket.color %>"><%= ticket.status %></font>, <%= ticket.type %>, <%= ticket.points %>)
                <%  if (ticket.sub_tasks.length != 0) { %>
                     <a id="sub_task_toggle-<%= ticket.key %>" href="javascript:toggle_sub_tasks('<%= ticket.key %>')"><i class="fa fa-plus-square-o"></i></a>
                <% } %>
            </td>
        </tr>

        <tr id="sub_task-<%= ticket.key %>" style="display:none">
            <td>&nbsp;</td>
            <td colspan="1">
                <table border="0">
                    <% for (var j = 0; j < ticket.sub_tasks.length; j+=1) { %>
                        <% var sub = ticket.sub_tasks[j] %>
                        <% var sub_sep = sub.parent_key ? " / " : "" %>
                        <tr>
                            <td align="center">
                                <a href="/entries/new?ticket_num=<%= sub.key %>&parent_ticket=<%= sub.parent_key %>&subject=<%= encodeURIComponent(sub.summary) %>&category=Ticket"><i class="fa fa-arrow-down"></i></a>
                            </td>
                            <td>
                                <a href="http://<%= ticket.jira_host %>/browse/<%= sub.parent_key %>"><%= sub.parent_key %></a><%= sub_sep %><a href="<%= sub.link %>"><%= sub.key %> - <%= sub.summary %></a>&nbsp;&nbsp;(<font color="<%= sub.color %>"><%= sub.status %></font>)
                            </td>
                        </tr>
                    <% } %>
                </table>
            </td>
        </tr>

   <% } %>
</table>

<script>

    function toggle_sub_tasks(cid) {
        if ($('#sub_task-'+cid).is(':hidden')) {
            $('#sub_task-'+cid).show();
            $('#sub_task_toggle-'+cid).html('<i class="fa fa-minus-square-o"></i>');
        }
        else {
            $('#sub_task-'+cid).hide();
            $('#sub_task_toggle-'+cid).html('<i class="fa fa-plus-square-o"></i>');
        }
    }

</script>
